<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaskQueue</title>
</head>

<body>
    <button id="resetQueue">重置</button>
    <script type="module">
        import { TaskQueue } from './dist/index.js';
        const t1 = new TaskQueue({ maxLen: 5 }); // 创建一个队列实例

        /******************** 基础使用 ********************/
        const updateUser = (d) => {
            const randomTime = Math.floor(Math.random() * 1000 + 1000);
            return ((timer, data) => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve(data)
                    }, timer);
                })
            }).bind(null, randomTime, d)
        }
        // 任务列表
        const updateUserTasks = [updateUser('张三'), updateUser('李四'), updateUser('王五')];

        /**
         * 当前任务加入队列中
         * updateUserTasks第一个参数为任务列表
         * updateUser 第二个参数为任务的分租id
         */
        t1.push(updateUserTasks, 'updateUser').then(data => {
            console.log('当前id的对列结束：', data); // ["张三", "李四", "王五"]
        });

        /******************** 其他用法 ********************/
        // 全局监听任务完成的事件
        t1.on("finish", taskRes => {
            console.log(taskRes); // { id: 'xxx', result: []}
        });

        // 全局监听pending事件
        t1.on("pending", taskRes => {
            console.log(taskRes); // { id: 'xxx', result: []}
        });

    </script>
</body>

</html>
